<template>
  <div class="jump" :class="{ inRandom: inRandom }">
    <div
      class="theDice"
      :style="{
        background: `url(/image/dice_group.png) no-repeat ${
          -50 * num - 150
        }px 0px`,
      }"
      :class="{ inRandom: inRandom }"
      @click="randomTheDice"
    ></div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  props: {
    // 骰子投出来的点数
  },
  setup(props, { emit }) {
    const inRandom = ref(false);
    // 骰子的点数
    const num = ref(1);
    const randomTheDice = () => {
      // 不在旋转的情况下才能投骰子
      if (!inRandom.value) {
        // 最后结束的时候传出去
        num.value = Math.ceil(Math.random() * 6);
        inRandom.value = true;
        setTimeout(() => {
          inRandom.value = false;
          emit("randomTheDice", num.value);
        }, 2000);
      }
    };

    return {
      num,
      inRandom,
      randomTheDice,
    };
  },
});
</script>

<style lang="scss" scoped>
.theDice {
  width: 50px;
  height: 50px;
  z-index: 3;
  transform: scale(1.5);
  &.inRandom {
    animation: dice 0.2s infinite step-start;
  }
}

.jump {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translate(0px, -50%);
  &.inRandom {
    animation: jump 2s ease-in-out;
  }
}

@keyframes dice {
  0% {
    background-position: 0px 0px;
  }
  25% {
    background-position: -50px 0px;
  }
  50% {
    background-position: -100px 0px;
  }
  75% {
    background-position: -150px 0px;
  }
  100% {
    background-position: 0px 0px;
  }
}

@keyframes jump {
  0% {
    bottom: 20px;
  }
  25% {
    bottom: 40px;
  }
  75% {
    bottom: 40px;
  }
  100% {
    bottom: 20px;
  }
}
</style>